<template>
  <transition appear enter-active-class="animate__animated animate__bounceInUp">
    <div class="loginBox">
      <el-row justify="center">
        <el-col :span="24" style="text-align: center;">
          <img src="../assets/logo.png" style="width: 20%;" />
        </el-col>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-col :span="24">
          <div class="inputCon">
            <i class="iconfont icon-users"></i>
            <input
              v-model="username"
              placeholder="用户名"
              type="text"
              class="loginInput"
            />
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 25px">
        <el-col :span="24">
          <div class="inputCon">
            <i class="iconfont icon-password"></i>
            <input
              v-model="password"
              placeholder="密码"
              type="password"
              class="loginInput"
            />
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-col :span="12" style="text-align: left">
          <div style="width: 100%;color: #ec1e1e;">&nbsp;{{ loginError }}</div>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <span style="color: #4c6986;cursor: pointer">忘记密码？</span>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20%">
        <el-col :span="24" style="text-align: center">
          <el-button
            style="width: 100%"
            :loading="loading.loginLoad"
            type="primary"
            @click="login"
            >登录</el-button
          >
        </el-col>
      </el-row>
    </div>
  </transition>
  <cancas2></cancas2>
</template>

<script>
import http from '@/utils/request.js'; // eslint-disable-line no-unused-vars
import { serviceModule } from '@/api/index.js'; // eslint-disable-line no-unused-vars
import cancas2 from '@/components/canvas_02.vue';
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
  onActivated,
  onDeactivated,
  getCurrentInstance
} from 'vue';
export default {
  name: 'login',
  components: { cancas2 },
  created() {
    console.log(this.$dayjs().format('YYYY-MM-DD HH:mm:ss'));
    // console.log(this.$dayjs().unix());
  },
  setup() {
    const { proxy } = getCurrentInstance();
    onBeforeMount(() => {
      console.log(proxy);
      console.log(proxy.$dayjs().format('YYYY-MM-DD HH:mm:ss'));
      console.log('onBeforeMount');
    });
    onMounted(() => {
      console.log('onMounted');
    });
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate');
    });
    onUpdated(() => {
      console.log('onUpdated');
    });
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount');
    });
    onUnmounted(() => {
      console.log('onUnmounted');
    });
    onErrorCaptured(() => {
      console.log('onErrorCaptured');
    });
    // 状态跟踪
    onRenderTracked(event => {
      console.log(event);
      console.log('onRenderTracked');
    });
    // 状态触发
    onRenderTriggered(event => {
      console.log(event);
      console.log('onRenderTriggered');
    });
    onActivated(() => {
      console.log('onActivated');
    });
    onDeactivated(() => {
      console.log('onDeactivated');
    });

    let username = ref('admin');
    let password = ref('123456');
    let loginError = ref('');
    let loading = reactive({
      loginLoad: false
    });

    let login = () => {
      console.log(proxy);
      loading.loginLoad = true;
      // 本地登录
      // _this.$router.push({path: '/home', query: {id: 'userManage'}})
      // sessionStorage.setItem('token', 'F526d7BE-b0eD-880D-2a35-9FFb78d6d477')
      loading.loginLoad = true;
      if (username.value == '' || password.value == '') {
        loginError.value = '用户名或密码为空';
        loading.loginLoad = false;
      }
      http(serviceModule.login, {
        username: username.value,
        password: password.value
      }).then(
        data => {
          loading.loginLoad = false;
          if (data.code === 200) {
            if (data.data.errno) {
              alert(data.data.errmsg);
            } else {
              sessionStorage.setItem('token', data.data.token);
              proxy.$router.push({ path: '/layout' });
            }
          } else {
            loginError = '用户名或密码错误';
            // $Message.error('登录失败');
          }
        },
        error => {
          loading.loginLoad = false;
          console.log(error);
        }
      );
    };
    return { username, password, loginError, loading, login };
  }
};
</script>

<style scoped lang="less">
.loginBox {
  width: 26rem;
  height: 30rem;
  position: fixed;
  border: 1px solid rgba(255, 255, 255, 0.2);
  // box-shadow: 0px 0px 20px rgba(6, 17, 47, 0.7);
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  right: 0;
  top: 22%;
  margin: auto;
  box-sizing: border-box;
  padding: 25px;
  .loginInput {
    width: 100%;
    line-height: 35px;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 3px;
    cursor: pointer;
    padding-right: 10px;
    padding-left: 35px;
    color: #61bfff;
    box-sizing: border-box;
  }
  .loginInput::-webkit-input-placeholder {
    color: #fff;
  }
}
.inputCon {
  width: 100%;
  position: relative;
  color: #fff;
  i {
    position: absolute;
    top: 4px;
    left: 10px;
  }
}
</style>
